import React from 'react';
import './index.css';
import { NoticeBar } from 'antd-mobile';
import mzsdk from '../../../../utils/mzsdk'

/**
 * 公告组件
 */

export default class LiveNotice extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShow: false,//是否展示公告
            content: '',//公告内容
        }
    }

    componentWillUnmount() {
        mzsdk.mzee.off('proclamations_change')
    }

    componentDidMount() {
        var _this = this;
        mzsdk.mzee.on('proclamations_change', function (e) {
            _this.setState({
                content: e.content !== undefined ? e.content : _this.state.content,
                isShow: e.isShow !== undefined ? e.isShow : _this.state.isShow
            }, () => {
                mzsdk.mzee.emit('chat_updateFrame')
            })
        })
    }

    render() {
        let { isShow, content } = this.state;
        return (
            <div id="live-notice-background" style={{ display: isShow ? 'block' : 'none' }}>
                <NoticeBar marqueeProps={{ loop: true, style: { padding: '0.15rem', fontSize: '0.24rem', color: '#ff5b29', height: '0.35rem', lineHeight: '0.35rem' } }}>{content}</NoticeBar>
            </div>
        )
    }
}
